<template>
    <div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" label-width="110px">
                    <el-form-item label="专项名称：" style="" class="Title">
                        <el-input v-model="taskName" placeholder="80字以内" style="border-color: red!important;"></el-input>
                    </el-form-item>
                    <el-form-item label="专项类型：" style="float: left;width: 50%">
                        <el-select value-key="id" v-model="value"  placeholder="请选择" style="width:100%">
                            <el-option v-for="item in taskTypeName"
                                       :key="item.id"
                                       :label="item.label"
                                       :value="item.value">

                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="承办人：" style="float: left;width: 50%" class="cbItem">
                        <el-input v-model="UserName"></el-input>
                    </el-form-item>
                    <div style="clear: both"></div>

                    <el-form-item label="交办领导：" style="float: left;width: 50%">
                        <el-input v-model="leadName"></el-input>
                    </el-form-item>
                    <el-form-item label="计划完成时间：" style="float: left;width: 50%" class="dateItem">
                        <el-date-picker v-model="planDate" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd hh:mm:ss" placeholder="选择日期" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                    <div style="clear: both"></div>
                    <el-form-item label="说明：">
                        <el-input v-model="taskExplain" type="textarea" rows="5" placeholder="150字以内"></el-input>
                    </el-form-item>
                    <!--<el-form-item label="补登历史专项">-->
                        <!--<el-checkbox v-model="checked" style="width: 150px"></el-checkbox>-->
                    <!--</el-form-item>-->
                    <!--<el-form-item label="标签标记：">-->
                        <!--<div>-->
                            <!--<el-checkbox-group v-model="checkboxGroup1">-->
                                <!--<el-checkbox-button v-for="label in LabelTag" :label="label" :key="label">{{label}}</el-checkbox-button>-->
                            <!--</el-checkbox-group>-->
                        <!--</div>-->
                    <!--</el-form-item>-->

                        <div class="submit">
                            <div style="width: 50%;height: 1px"></div>
                            <el-button class="btn" type="primary" @click="save">保存</el-button>
                        </div>

                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    import ht from '../../components/common/address'
    import get from '../../components/common/getUrl'
    import $ from 'jquery';
    const cityOptions = ['重大项目', '综合项目', '紧急', '紧急2'];
    export default {
        name: "newSpecial",
        data: function(){
            return {
                UserName:'',
                checkboxGroup1: ['重大项目'],
                LabelTag: cityOptions,
                taskName: '',
                leadName: '',
                planDate: '',
                taskExplain: '',
                taskTypeName: [
                    {
                        id:'a',
                        value:'1',
                        label:'综合专项',
                        name:'a'
                    } ,
                //     {
                //         id:'b',
                //         value:'2',
                //         label:'厅务会议',
                //         name:'b'
                //     } ,
                //     {
                //         id:'c',
                //         value:'3',
                //         label:'调研',
                //         name:'c'
                //     } ,
                //     {
                //         id:'d',
                //         value:'4',
                //         label:'政务活动',
                //         name:'d'
                //     }
                ],
                value:'',
                region: '',
                date: '',
                delivery: true,
                desc: '',
                checked: '',
                Token:'',
                urlData:'',
                tasID: ''
            }
        },
        methods: {
            // changeFun(val) {
            //     console.log('aa',val);
            //     this.LabelTag = val;
            // },
            getUrlDate(){
                let dataPost= {
                    "taskName": this.taskName,
                    "taskTypeName": this.value,
                    "labelCode": "",
                    "leaderId": "",
                    "leaderName": this.leadName,
                    "planCompleteTime": this.planDate,
                    "taskExplain": this.taskExplain,
                    "hisTaskId": "",
                    "labelName": ""
                }
                this.$http({
                    method:'POST',
                    url:ht.Address + "personal/task/registerTask",
                    dataType:'jsonp',
                    params:dataPost,
                    headers: {
                        'Content-Type':'application/x-www-form-urlencoded;charset=utf-8',
                        'Authorization': this.urlData
                    },
                    emulateJSON: true
                }).then(function(data){
                    console.log(data);
                },function(error){
                    console.log('出错');
                })
            },
            savePost(){
                var Token = localStorage.getItem('token');
                console.log(Token);
                let dataPost= {
                    "taskName": this.taskName,
                    "taskTypeName": this.value,
                    "labelCode": "",
                    "leaderId": "",
                    "leaderName": this.leadName,
                    "planCompleteTime": this.planDate,
                    "taskExplain": this.taskExplain,
                    "hisTaskId": "",
                    "labelName": ""
                }
                this.$http({
                    method:'POST',
                    url:ht.Address + "personal/task/registerTask",
                    dataType:'jsonp',
                    params:dataPost,
                    headers: {
                        // 'Content-Type':'application/json;charset=utf-8'
                        'Content-Type':'application/x-www-form-urlencoded;charset=utf-8',
                        // "X-Requested-With": "XMLHttpRequest",
                        'Authorization': Token
                    },
                    emulateJSON: true
                }).then(function(data){
                    console.log(data.data.data.id);
                    this.tasID = data.data.data.id
                    // this.$router.push("/detail01");
                    this.$router.push({
                        path:'/detail01',
                        query:{
                            id:this.tasID
                        }
                    });
                },function(error){
                    console.log('出错');
                })
            },
            save() {
                // this.$router.push('/detail');
                this.Token = localStorage.getItem('token');
                // console.log(this.Token)
                this.urlData = get.getUrlKey('sessionid');
                console.log('sessionid:',this.urlData);
                if (this.urlData){
                    console.log('url传参');
                   this.getUrlDate();
                }else {
                    console.log('登陆保存');
                    this.savePost();
                }



                // this.$http({
                //     method:'POST',
                //     url:ht.Address + "task/registerTask",
                //     dataType:'jsonp',
                //     data:JSON.stringify(
                //         {
                //             "taskName": this.taskName,
                //             "taskTypeName": this.value,
                //             "labelCode": "",
                //             "leaderId": "",
                //             "leaderName": this.leadName,
                //             "planCompleteTime": this.planDate,
                //             "taskExplain": this.taskExplain,
                //             "hisTaskId": "",
                //             "labelName": ""
                //         }
                //     ),
                //     contentType:'application/json; charset=utf-8',
                //     headers: {
                //         // 'Content-Type':'application/json;charset=utf-8'
                //         // 'Content-Type':'application/x-www-form-urlencoded;charset=utf-8',
                //         // "X-Requested-With": "XMLHttpRequest",
                //         'Authorization': Token
                //     },
                //     emulateJSON: true
                // }).then(function(data){
                //     console.log(data);
                // },function(error){
                //     console.log('出错');
                // })

            }
        },
        created(){
            this.UserName = localStorage.getItem('username');
            console.log('username:',this.UserName)
        }
    }
</script>

<style scoped>
    .form-box{
        max-width: 1000px;
    }
    .container{
        border: 0px!important;
    }
    .form-box>>>.el-checkbox-button:first-child .el-checkbox-button__inner{
        border-radius: 0px!important;
    }
    .form-box>>>.el-textarea__inner{
        border-color: #344154!important;
        color: #344154!important;
        border-radius: 0!important;
    }
    .form-box>>>.el-button--primary{
        background-color: #3271FC!important;
    }
    .form-box>>>.el-checkbox-button[data-v-2df1d7a6], .el-checkbox-button__inner[data-v-2df1d7a6]{
        border-color: #185BA9!important;
    }
    .form-box>>>.el-checkbox-button--small .el-checkbox-button__inner{
        font-size: 18px;
        color: #3F76EB!important;
    }
    .form-box>>>.el-checkbox-button.is-checked .el-checkbox-button__inner{
        background-color: #4478F0!important;
        color: #fff!important;
        /*font-size: 18px;*/
    }
    .form-box>>>.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
        background-color: transparent!important;
    }
    .form-box>>>.el-checkbox__inner::after{
        border-color: #3F76EB!important;
        left: 10px;
        height: 16px;
        top: 3px;
        width: 7px;
    }
    .form-box>>> .el-checkbox__inner{
        width: 30px!important;
        height: 30px!important;
        border-color: #344154!important;
    }
    .form-box>>>.dateItem .el-form-item__label{
        width: 150px!important;
    }
    .form-box>>>.cbItem .el-form-item__label{
        width: 150px!important;
    }
    .form-box>>>.cbItem .el-form-item__content{
        margin-left: 160px!important;
    }
    .form-box>>>.dateItem .el-form-item__content{
        margin-left: 160px!important;
    }
    .form-box>>>.el-input__inner{
        border-radius: 0!important;
        border-color: #344154!important;
        color: #344154!important;
    }
    .form-box>>>.el-checkbox{
        margin-left: 20px;
    }
    .form-box>>>.el-checkbox-button__inner{
        border: 0px!important;
    }
    .form-box>>>.el-form-item__label{
        font-size: 18px;
        padding-right: 0px!important;
        color: #344154!important;
    }
    .submit{
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .el-button--small, .el-button--small.is-round{
        padding: 10px 40px;
        font-size: 20px;
    }
    .el-checkbox-button, .el-checkbox-button__inner{
        margin-right: 20px;
        border:1px solid #409EFF;
        /*border-radius: 0;*/
    }
    .el-form-item__label{
        width: 150px;
    }
    .el-form-item--small .el-form-item__content, .el-form-item--small .el-form-item__label{
        margin-left: 150px;
    }
.form-box{
    width: 100%;
}
/*.Title{*/
    /*background-color: red;*/
/*}*/
.el-form-item__content{
        margin-left: 100px!important;
    }
</style>
